<template>
    <div>
        <br>
        <br>
        <br>

        <el-form :inline="true" :model="searchData" style="display: flex; align-items: center;"
            class="demo-form-inline">
            <el-form-item label="客户编号:">
                <el-input v-model="searchData.CustomrCode" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="客户名称:">
                <el-input v-model="searchData.CustomName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="电话:">
                <el-input v-model="searchData.Phone" placeholder="请输入"></el-input>
            </el-form-item>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-form-item>
                <el-button type="primary" @click="GetCustomerManagemenDtoAsync()">
                    <i class="el-icon-search">&nbsp;</i>查询
                </el-button>
                &nbsp;
                <el-button type="success" @click="add()"><i class="el-icon-plus"></i>&nbsp;添加</el-button>
                &nbsp;&nbsp;
                <el-button type="danger" @click="BatchDel()"><i class="el-icon-delete"></i>&nbsp;批量删除</el-button>
                &nbsp;&nbsp;
                <el-button type="success" plain @click="exportListToExcel(ids)"><i
                        class="el-icon-upload2"></i>&nbsp;导出</el-button>
            </el-form-item>
        </el-form>

        <p></p>
        <br>
        <el-table :data="customerList" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center">
            </el-table-column>
            <el-table-column prop="customrCode" label="客户编号" align="center">
            </el-table-column>
            <el-table-column prop="customName" label="客户名称" align="center">
            </el-table-column>
            <el-table-column prop="fax" label="类型" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="电话" align="center">
            </el-table-column>
            <el-table-column prop="comment" label="传真" align="center">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" align="center">
            </el-table-column>
            <el-table-column prop="contacts" label="联系人" align="center">
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center">
                <template slot-scope="scope">
                    {{ scope.row.createTime.substring(0, 10) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">

                <template slot-scope="scope">
                    <el-link type="warning" @click="upd(scope.row.id, scope.row.customrCode)">编辑</el-link>
                    &nbsp;&nbsp;
                    <el-link type="danger" @click="del(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <br>

        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                总共{{ page.totalCount }}条数据，每页显示{{ page.pageSize }}条数据，共{{ page.pageCount }}页，当前第{{ page.pageIndex }} /
                {{ page.pageCount }}页
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                    layout="sizes,slot, prev, pager, next" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1">首页</button>
                </el-pagination>
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                    layout="slot,jumper" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(page.pageCount)"
                        :disabled="page.pageIndex == page.pageCount">尾页</button>
                </el-pagination>
            </el-form-item>
        </el-form>

        <!-- 添加弹出层表单 -->
        <el-dialog title="新增客户" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="10" :offset="1">
                        <el-form-item label="客户编号" required>
                            <el-input v-model="form.CustomrCode" readonly placeholder="客户编号"></el-input>
                        </el-form-item>
                        <el-form-item label="传真" required>
                            <el-input v-model="form.Fax" autocomplete="off" placeholder="传真"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" required>
                            <el-input v-model="form.Email" autocomplete="off" placeholder="邮箱"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="客户名称" required>
                            <el-input v-model="form.CustomName" autocomplete="off" placeholder="（要求名称重复性验证）"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" required>
                            <el-input v-model="form.Phone" autocomplete="off" placeholder="电话"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" required>
                            <el-input v-model="form.Comment" autocomplete="off" placeholder="备注"></el-input>
                        </el-form-item></el-col>
                </el-row>
                <el-table :data="tableText" style="width: 100%">
                    <el-table-column label="联系人" prop="contacts">
                        <template slot-scope="scope">
                            <span v-if="scope.row.editable">
                                <el-input v-model="scope.row.contacts"></el-input>
                            </span>
                            <span v-else>{{ scope.row.contacts }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="地址">

                        <template slot-scope="scope">
                            <span v-if="scope.row.editable">
                                <el-input v-model="scope.row.address"></el-input>
                            </span>
                            <span v-else>{{ scope.row.address }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="电话">

                        <template slot-scope="scope">
                            <span v-if="scope.row.editable">
                                <el-input v-model="scope.row.phone"></el-input>
                            </span>
                            <span v-else>{{ scope.row.phone }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="age">

                        <template slot-scope="scope">
                            <span v-if="scope.row.editable">
                                <el-input v-model="scope.row.createTime"></el-input>
                            </span>
                            <span v-else>{{ scope.row.createTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">

                        <template slot-scope="scope">
                            <el-tag type="primary" @click="handleEdit(scope.row)">编辑</el-tag>
                            <el-tag @click="handleDel(scope.row)">删除</el-tag>
                            <el-tag @click="handleSave(scope.row)" class="el-icon-circle-plus-outline"
                                v-if="scope.row.editable"></el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="AddSeved()">添加</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { GetCustomerManagemenDtoAsync, DelCustomerManagement, BatchDelCustomerManagement, AddCustomDtoAsync } from "@/api/BasicsDatumServer/CustomerManagement";
import XLSX from 'xlsx';
import { autoGenerateCode } from "@/utils/utils";
export default {
    //数据
    data() {
        return {
            //查询条件
            searchData: {
                CustomrCode: "",
                CustomName: "",
                Phone: "",
            },
            rules: {},
            //客户列表
            customerList: [],
            //分页
            page: {
                pageIndex: 1,
                pageSize: 5,
                pageCount: 0,
                totalCount: 0
            },
            //选中的复选框CustomrCode
            ids: [],
            //添加弹出层
            dialogFormVisible: false,
            //获取客户信息控件值
            form: {
                CustomrCode: "",
                CustomName: "",
                Fax: "",
                Phone: "",
                Email: "",
                Comment: "",
            },
            //客户联系人列表
            tableText: [],
        }
    },
    //计算属性
    computed: {
        sid() {
            var sid = [];
            this.ids.forEach((item) => {
                sid.push(item.id);
            })
            return sid;
        },
    },
    //方法
    methods: {
        //显示客户管理
        GetCustomerManagemenDtoAsync() {
            let data = {
                customrCode: this.searchData.CustomrCode,
                customName: this.searchData.CustomName,
                phone: this.searchData.Phone,
                pageIndex: this.page.pageIndex,
                pageSize: this.page.pageSize,
            };

            GetCustomerManagemenDtoAsync(data).then(res => {
                this.customerList = res.data.data.data;

                this.page.pageCount = res.data.pageCount;
                this.page.totalCount = res.data.totalCount;
            });
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.GetCustomerManagemenDtoAsync();
        },
        handleCurrentChange(val) {
            this.page.pageIndex = val;
            this.GetCustomerManagemenDtoAsync();
        },
        del(id) {
            this.$confirm('您确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.Del(id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //删除仓库
        Del(id) {
            let data = {
                id: id
            };

            DelCustomerManagement(data).then(res => {
                if (res.data.totalCount > 0) {
                    this.$message.success('删除成功');
                    this.GetCustomerManagemenDtoAsync();

                    this.page.pageIndex == 1;
                }
                else {
                    this.$message.error('删除失败');
                }
            })
        },
        //选中的复选框Id
        handleSelectionChange(val) {
            this.ids = val;
        },
        //批量删除仓库
        BatchDel() {
            if (this.ids.length == 0) {
                this.$message({
                    message: '请至少选择一条要删除的数据！',
                    type: 'warning'
                });
                return
            }
            var data = {
                delId: this.sid.toString(),
            }

            this.$confirm('此操作将永久批量删除该文件?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                BatchDelCustomerManagement(data).then((res) => {
                    if (res.data.totalCount > 0) {
                        this.$message({
                            message: "批量删除成功",
                            type: "success",
                        });
                        this.GetCustomerManagemenDtoAsync();
                        this.page.pageIndex == 1;
                    } else {
                        this.$message({
                            message: "批量删除失败",
                            type: "error",
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消批量删除'
                });
            });
        },
        //导出
        exportListToExcel(ids) {
            //验证
            if (this.ids.length == 0) {
                this.$message({
                    message: '请至少选择一条要导出的数据！',
                    type: 'warning'
                });
                return
            }

            // 过滤需要导出的字段
            const aaa = ids.map(item => {
                return {
                    客户编号: item.customrCode,
                    客户名称: item.customName,
                    类型: item.fax,
                    电话: item.phone,
                    传真: item.comment,
                    Email: item.email,
                    联系人: item.contacts,
                    地址: item.address,
                    创建时间: item.createTime,
                };
            });
            const worksheet = XLSX.utils.json_to_sheet(aaa);
            //设置表格宽度
            worksheet['!cols'] = [
                { width: 10 },
                { width: 15 },
                { width: 15 },
                { width: 20 },
                { width: 15 },
                { width: 15 },
                { width: 10 },
                { width: 15 },
                { width: 15 },
            ];

            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            // 导出Excel文件
            XLSX.writeFile(workbook, '乔建伟的客户管理.xlsx');
        },
        //打开添加弹出层
        add() {
            this.dialogFormVisible = true;
            this.addNewRecord();
        },
        //客户联系人信息显示
        // FillCustomContactDtoAsync() {
        //     var data = {
        //         customrCode: this.form.CustomrCode,
        //     };
        //     console.log(111111111, data.customrCode);


        //     FillCustomContactDtoAsync(data).then(res => {
        //         this.tableText = res.data.data;
        //     });
        // },
        //追加客户联系人表格
        addNewRecord() {
            this.tableText.push({
                // 添加一条新的记录
                contacts: "",
                address: "",
                phone: "",
                createTime: "",
                editable: false,
            });
        },
        handleEdit(row) {
            row.editable = true;
        },
        handleSave(row) {
            this.addNewRecord();
            row.editable = false;
        },
        handleDel(row) {
            //console.log(row.address, row.contacts, row.phone);
            //判断是否有数据
            if (this.tableText.length == 0) {
                this.$message({
                    message: "必须存在一条联系人信息",
                    type: "warning",
                });
                return;
            } else {
                this.tableText.pop();
            }
        },
        //添加客户
        AddSeved() {
            var data = {
                customrCode: this.form.CustomrCode,
                customName: this.form.CustomName,
                fax: this.form.Fax,
                phone: this.form.Phone,
                email: this.form.Email,
                comment: this.form.Comment,
                customContactDtosList: this.tableText,
            };
            console.log(111111111, data);

            AddCustomDtoAsync(data).then(res => {
                if (res.data.totalCount > 0) {
                    this.$message({
                        message: "添加成功",
                        type: "success",
                    });
                    this.dialogFormVisible = false;
                    this.GetCustomerManagemenDtoAsync();
                } else {
                    this.$message({
                        message: "客户名称已存在，请重新输入！",
                        type: "error",
                    });
                }
            });

        },
        upd(id, customrCode) {
            //跳转到修改页面
            this.$router.push("CustomerManagementListUpd?id=" + id + "&customrCode=" + customrCode);
        },
    },
    //勾子函数加载数据
    created() {
        this.GetCustomerManagemenDtoAsync();

        this.form.CustomrCode = autoGenerateCode("KH");
    },
}
</script>

<style></style>